<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>学生信息展示</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/graduateinfo/media/css/font.css">
    <link rel="stylesheet" href="/graduateinfo/media/css/xadmin.css">
    <link rel="stylesheet" href="/graduateinfo/media/layui/css/layui.css">
    <style id="LAY_layadmin_theme">.layui-side-menu,.layadmin-pagetabs .layui-tab-title li:after,.layadmin-pagetabs .layui-tab-title li.layui-this:after,.layui-layer-admin .layui-layer-title,.layadmin-side-shrink .layui-side-menu .layui-nav>.layui-nav-item>.layui-nav-child{background-color:#20222A !important;}.layui-nav-tree .layui-this,.layui-nav-tree .layui-this>a,.layui-nav-tree .layui-nav-child dd.layui-this,.layui-nav-tree .layui-nav-child dd.layui-this a{background-color:#009688 !important;}.layui-layout-admin .layui-logo{background-color:#20222A !important;}</style>

    <script src="/graduateinfo/media/js/jquery.min.js"></script>
    <script src="/graduateinfo/media/js/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="/graduateinfo/media/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/graduateinfo/media/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="/graduateinfo/media/js/axios.min.js"></script>
    <script src="/graduateinfo/media/js/cookie.js"></script>
    <script src="/graduateinfo/media/api/student.js"></script>
    <style>
      .layui-upload-list{
        display: inline-block;
        margin: 0;
      }
      .layui-upload-img{
        height: 150px;
        margin: 0;
      }
       .upload-button{
         margin-top:56px;
       }
    </style>
  </head>
  
  <body class="form-wrap" >

  <div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-card-header">学生信息</div>
      <div class="layui-card-body" style="padding: 15px;">
        <form class="layui-form" lay-filter="component-form-group" onsubmit="return false">
          <!-- 姓名 -->
          <!-- <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
              <input type="text" name="name" class="layui-input">
            </div>
          </div> -->

          <!--姓名 身份证 照片-->
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
              <input type="text" name="name" class="layui-input">
            </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">性别</label>
              <div class="layui-input-block">
                <select name="gender">
                  <option value="男">男</option>
                  <option value="女">女</option>
                </select>
              </div>
            </div>

            <div class="layui-inline">
              <div class="layui-upload">
                <button type="button" class="layui-btn upload-button" id="test1">
                  <i class="layui-icon layui-icon-upload">&#xe67c;</i>
                  上传图片
                </button>
                <div class="layui-upload-list">
                  <img class="layui-upload-img" id="userImage">
                  <p id="demoText"></p>
                </div>
              </div>
<!--              <input type="file"  id="fileToUpload" name="photo" >-->
            </div>
          </div>

          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">身份证号</label>
              <div class="layui-inline">
                <input type="text" name="citizenId" placeholder=""  class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">民族</label>
                <div class="layui-inline">
                    <input type="text" name="ethnicGroups" placeholder=""  class="layui-input">
                </div>
            </div>
          </div>
          <!-- 生源地 -->
          <div class="layui-form-item" id="area-picker">
            <div class="layui-form-label">生源地址</div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="province" id="province" data-value="" class="province-selector" lay-filter="province">
                    <option value="">请选择省份</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width: 200px;">
                <select name="city" id="city" class="city-selector" data-value="" lay-filter="city">
                    <option value="">请选择市</option>
                </select>
            </div>
            <!-- <div class="layui-input-inline" style="width: 200px;">
                <select name="county" class="county-selector" data-value="龙岗区" lay-filter="county-1">
                    <option value="">请选择区</option>
                </select>
            </div> -->
        </div>
        <!-- 入学学年 毕业学年-->
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">入学学年</label>
            <div class="layui-input-inline">
              <input type="text" name="enrollmentYear" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">毕业学年</label>
            <div class="layui-input-inline">
              <input type="text" name="graduationYear" class="layui-input">
            </div>
          </div>
        </div>

        <!-- 学院 专业 -->
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">毕业学院</label>
            <div class="layui-input-inline">
              <input type="text" name="college" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">毕业专业</label>
            <div class="layui-input-inline">
              <input type="text" name="major" class="layui-input">
            </div>
          </div>
        </div>

        <!-- 学号 学历 -->
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">学号</label>
            <div class="layui-input-inline">
              <input type="text" name="stuId" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">学历</label>
            <div class="layui-input-block">
              <select name="degree">
                <option value="">--请选择学历--</option>
                <option value="博士">博士</option>
                <option value="专科">专科</option>
                <option value="本科">本科</option>
                <option value="硕士">硕士</option>
              </select>
            </div>
          </div>
        </div>

        <!-- 联系方式 家庭住址 -->
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">联系方式</label>
              <div class="layui-input-inline">
                <input type="tel" name="phone" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">家庭住址</label>
              <div class="layui-input-inline">
                <input type="text" name="familyAddr" class="layui-input">
              </div>
            </div>
          </div>   
          <div class="layui-form-item layui-layout-admin">
            <div class="layui-input-block">
              <div class="layui-footer" style="left: 0;">
                <button onclick="submitForm()" class="layui-btn" lay-submit="" lay-filter="component-form-demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
<script>
  const uid = getCookie("uid");
  // JQuery获取表单元素
  const citizenId = $('input[name="citizenId"]');
  const name = $('input[name="name"]');
  const gender = $('select[name="gender"]');
  const ethnicGroups = $('input[name="ethnicGroups"]');
  const provinceBorn = $('select[name="province"]');
  const cityBorn = $('select[name="city"]');
  const enrollmentYear = $('input[name="enrollmentYear"]');
  const graduationYear = $('input[name="graduationYear"]');
  const college = $('input[name="college"]');
  const major = $('input[name="major"]');
  const stuId = $('input[name="stuId"]');
  const degree = $('select[name="degree"]');
  const phone = $('input[name="phone"]');
  const familyAddr = $('input[name="familyAddr"]');
  const photo = $('#userImage');
  const submitBtn = $('button[lay-filter="component-form-demo1"]');
  let layer = null;
  let form = null;

  layui.config({
    base: '/graduateinfo/media/layui/lay/modules/'
    , version: '1.0'
  });
  //一般直接写在一个js文件中
  layui.use(['layer', 'form', 'layarea'], function () {
    layer = layui.layer
    form = layui.form
    var layarea = layui.layarea;

    if(uid){
      StudentApi.getUserImage(uid).then(res=>{
        $("#userImage").attr("src",res);
      }).catch(err=>{
        console.log(err);
      })
      getUserInfo().then(res=>{
        form.render('select');
        layarea.render({
          elem: '#area-picker',
          data: {
            province:res.provinceBorn,
            city:res.cityBorn
          },
          change: function (res) {
            //选择结果
          }
        });

      })
    }else {
      window.location.href = "/graduateinfo/";
    }


  });
  layui.use('upload', function(){
    var upload = layui.upload;
    //普通图片上传
    var uploadInst = upload.render({
      elem: '#test1'
      ,url: '/upload/'
      ,before: function(obj){
        //预读本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
          $('#demo1').attr('src', result); //图片链接（base64）
        });
      }
      ,done: function(res){
        //如果上传失败
        if(res.code > 0){
          return layer.msg('上传失败');
        }
        //上传成功
      }
      ,error: function(){
        //演示失败状态，并实现重传
        var demoText = $('#demoText');
        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
        demoText.find('.demo-reload').on('click', function(){
          uploadInst.upload();
        });
      }
    });
  });


  // 提交表单函数
  function submitForm() {
    const data = {
      uid:uid,
      citizenId:citizenId.val(),
      name:name.val(),
      gender:gender.val(),
      ethnicGroups:ethnicGroups.val(),
      provinceBorn:provinceBorn.val(),
      cityBorn:cityBorn.val(),
      enrollmentYear:enrollmentYear.val(),
      graduationYear:graduationYear.val(),
      college:college.val(),
      major:major.val(),
      stuId:stuId.val(),
      degree:degree.val(),
      phone:phone.val(),
      familyAddr:familyAddr.val(),
      photo:photo.val()
    }
    const formData = new FormData();
    formData.append("uid",uid);
    formData.append("citizenId",citizenId.val());
    formData.append("name",name.val());
    formData.append("gender",gender.val());
    formData.append("ethnicGroups",ethnicGroups.val());
    formData.append("provinceBorn",provinceBorn.val());
    formData.append("cityBorn",cityBorn.val());
    formData.append("enrollmentYear",enrollmentYear.val());
    formData.append("graduationYear",graduationYear.val());
    formData.append("college",college.val());
    formData.append("major",major.val());
    formData.append("stuId",stuId.val());
    formData.append("degree",degree.val());
    formData.append("phone",phone.val());
    formData.append("familyAddr",familyAddr.val());
    formData.append("photo",photo.val());
    console.log(formData)
    StudentApi.updateUserInfo(uid,formData).then(res=>{
      if(res.data.statusCode === 200){
        const dataStr = JSON.stringify(data)
        console.log(dataStr)
        setCookie("userInfo",dataStr,7)
        layer.msg(res.data.message,{
          icon:1,
          time:3000
        })
        setTimeout(function () {
          window.location.reload();
        },3000)
      }else {
        layer.msg(res.data.message, {
          icon:2,
          time:3000
        })
      }
    }).catch(err=>{
      console.log(err)
    })
  }

  async function getUserInfo(){
    if(uid){
      const data = await StudentApi.getUserInfo(uid).then(res=>{
        const data = res.data.data
        console.log(data)
        // JQuery设置表单元素的值
        citizenId.val(data.citizenId)
        name.val(data.name)
        gender.val(data.gender)
        provinceBorn.dataValue = data.provinceBorn;
        cityBorn.dataValue = data.cityBorn;
        ethnicGroups.val(data.ethnicGroups)
        college.val(data.college)
        major.val(data.major)
        stuId.val(data.stuId)
        degree.val(data.degree)
        phone.val(data.phone)
        familyAddr.val(data.familyAddr)
        enrollmentYear.val(data.enrollmentYear)
        graduationYear.val(data.graduationYear)
        return data
      }).catch(err=>{
        console.log(err)
      })
      return data
    } else {
      layer.alert("请先登录")
      window.location.href = "/graduateinfo/"
    }
  }
</script>
</body>
</html>